<template>
    <div>
      <el-tooltip class="item" effect="dark" :content="num+''" placement="top">
        <div>
          <v-countup
            :start-value="startNum"
            :end-value="onYiWan(num)"
            :decimals="isWan ? 1 : 0"
            :duration="2"
            :option="{
              separator:',',
              decimal:'.'
            }"
            class="DIN_BlackItalic">
          </v-countup><span v-if="isWan">万</span>
        </div>
      </el-tooltip>
    </div>
</template>

<script>
// import vCountup from 'vue-countupjs';

export default {
  name: 'oneVue',
  // components: { vCountup },
  props: {
    num: {
      type: [Number, String],
      default: 0,
    },
  },
  data() {
    return {
      isWan: false,
      decimals: 0,
      startNum: 0,
      newNum: 0,
    };
  },
  // 首次储存
  mounted() {
    this.newNum = this.num;
  },
  // computed: {
  //   endNum() {
  //     return this.onYiWan(this.num);
  //   },
  // },
  watch: {
    // 过万转换和储存旧数据
    num() {
      this.startNum = this.newNum;
      if (this.num >= 10000 || this.num <= -10000) {
        this.startNum /= 10000;
        this.isWan = true;
      } else {
        this.isWan = false;
      }
      this.newNum = this.num;
    },
  },
  methods: {
    // 过万转换
    onYiWan(val) {
      let value = 0;
      if (val >= 10000 || val <= -10000) {
        value = val / 10000;
        return value;
      }
      return val;
    },
  },
};
</script>

<style>
</style>
